<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 基础表格
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          icon="el-icon-delete"
          class="handle-del mr10"
          @click="delAllSelection"
          >批量删除</el-button
        >

        <el-button type="primary" icon="el-icon-plus" @click="add"
          >添加</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column label="标题">
          <template slot-scope="scope">￥{{ scope.row.titles }}</template>
        </el-table-column>

        <el-table-column prop="contents" label="内容"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success">{{ lei[scope.row.type - 1] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="cretatime" label="注册时间"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-bell"
              @click="handleEdit(scope.$index, scope.row)"
              >查看详情</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.page"
          :page-size="query.pagelimit"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 添加框 -->
    <el-dialog title="添加" :visible.sync="adds" width="30%">
      <div class="T-main">
        <div class="m-3">
          <div class="m-c">
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              ><!-- 用户名 -->
              <el-form-item
                label="用户名"
                prop="username"
                :rules="[
                  { required: true, message: '请输入用户名', trigger: 'blur' },
                ]"
              >
                <el-input
                  v-model="ruleForm.username"
                  placeholder="请输入地址"
                ></el-input>
              </el-form-item>
              <!-- 标题 -->
              <el-form-item
                label="标题"
                prop="titles"
                :rules="[
                  { required: true, message: '请输入标题', trigger: 'blur' },
                ]"
              >
                <el-input
                  v-model="ruleForm.titles"
                  placeholder="请输入地址"
                ></el-input>
              </el-form-item>
              <!-- 内容 -->
              <el-form-item
                label="内容"
                prop="contents"
                :rules="[
                  { required: true, message: '请输入内容', trigger: 'blur' },
                ]"
              >
                <el-input
                  v-model="ruleForm.contents"
                  placeholder="请输入地址"
                ></el-input>
              </el-form-item>
              <!-- 创建时间 -->
              <el-form-item
                label="创建时间"
                prop="time"
                :rules="[
                  {
                    required: true,
                    message: '请选择创建时间',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-date-picker
                  v-model="ruleForm.time"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <!-- 状态 -->
              <el-form-item
                label="状态"
                prop="value"
                :rules="[
                  {
                    required: true,
                    message: '请选择状态',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-select v-model="ruleForm.value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="adds = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd('ruleForm')"
                  >确 定</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>

    <!-- 新闻详情 -->

    <el-drawer title="详情内容" :visible.sync="drawer" direction="rtl">
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="用户名">{{
          newsInfo.username
        }}</el-descriptions-item>
        <el-descriptions-item label="标题">{{
          newsInfo.titles
        }}</el-descriptions-item>
        <el-descriptions-item label="内容" :span="2">{{
          newsInfo.contents
        }}</el-descriptions-item>
        <el-descriptions-item label="时间">
          <el-tag size="small">{{ newsInfo.cretatime }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="类型">{{
          lei[newsInfo.type]
        }}</el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>

<script>
import {
  getNewslist,
  delTableList,
  addTableList,
  newsInfo,
} from '../../api/news'
export default {
  data() {
    return {
      query: {
        page: 1,
        pagelimit: 10,
      },
      ruleForm: {
        titles: '',
        contents: '',
        time: '',
        username: '',
        value: '',
      },
      lei: ['娱乐', '军事', '体育'],
      tableData: [],
      multipleSelection: [],
      delList: [],
      adds: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1,

      options: [
        {
          value: '1',
          label: '娱乐',
        },
        {
          value: '2',
          label: '军事',
        },
        {
          value: '3',
          label: '体育',
        },
      ],
      drawer: false,
      newsInfo: [],
    }
  },
  created() {
    this.getData()
  },

  methods: {
    getData() {
      getNewslist(this.query).then((res) => {
        this.tableData = res.data.data
        this.pageTotal = res.data.pagecount
      })
    },
    addsss() {
      this.getData()
    },
    change() {
      this.getData()
    },
    clearInp() {
      this.getData()
    },

    // 删除操作
    handleDelete(index, row) {
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning',
      })
        .then(() => {
          let id = {
            id: row.id,
          }
          delTableList(id).then((res) => {
            if (res.code !== 0) return this.$message.error(res.msg)
            this.$message.success('删除成功')
            this.getData()
          })
        })
        .catch(() => {})
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //批量删除
    delAllSelection() {
      var ids = this.multipleSelection.map((item) => item.id)
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning',
      })
        .then(() => {
          delTableList(ids.join(','), sessionStorage.getItem('token')).then(
            (res) => {
              if (res.code !== 0)
                return this.$message.error('请选择你要删除的数据！')
              this.$message.success('删除成功')
              this.getData()
              this.multipleSelection = []
            }
          )
        })
        .catch(() => {})
    },
    //添加
    add() {
      this.adds = true
    },
    saveAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = {
            username: this.ruleForm.username,
            contents: this.ruleForm.contents,
            titles: this.ruleForm.titles,
            type: this.ruleForm.value - 0,
            cretatime: this.ruleForm.time,
            num: 0,
          }
          addTableList(obj).then((res) => {
            if (res.code !== 0) return this.$message.error(res.msg)
            this.adds = false
            this.$message.success('添加成功')
            this.getData()
          })
        } else {
          return false
        }
      })
    },
    //查看详情
    handleEdit(index, row) {
      this.drawer = true
      let id = {
        id: row.id,
      }
      newsInfo(id).then((res) => {
        if (res.code !== 0) return this.$message.error(res.msg)
        this.newsInfo = res.data
      })
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'page', val)
      this.getData()
    },
  },
}
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 100px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.T-main {
  padding: 20px;
}
.T-main .m-3 {
  background: #fff;
  width: 100%;
}
.T-main .m-3 .m-c {
  width: 400px;
  margin: 0 auto;
}
.T-main .m-3 .m-c .m-o {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 20px 0;
}
.T-main .m-3 .m-c .m-o p {
  width: 35px;
}
::v-deep .el-upload--text {
  width: 220px;
}
</style>
